<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Neat Admin Template</title>
<meta name="description" content="">

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/uniform.default.css">
<link rel="stylesheet" href="css/bootstrap.datepicker.css">
<link rel="stylesheet" href="css/jquery.cleditor.css">
<link rel="stylesheet" href="css/jquery.plupload.queue.css">
<link rel="stylesheet" href="css/jquery.jgrowl.css">
<link rel="stylesheet" href="css/jquery.tagsinput.css">
<link rel="stylesheet" href="css/jquery.ui.plupload.css">
<link rel="stylesheet" href="css/chosen.css">
<link rel="stylesheet" href="css/chosen.css">
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.22.custom.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="style-toggler">
	<img src="img/icons/fugue/color.png" alt="" class='tip' title="Toggle style-switcher" data-placement="right">
</div>					
<div class="style-switcher">
	<h3>Style-switcher</h3>
	<ul class='color'>
		<li>
			<a href="#" class='style'>Default</a>
		</li>
		<li>
			<a href="#" class='blue'>Blue</a>
		</li>
		<li>
			<a href="#" class='green'>Green</a>
		</li>
		<li>
			<a href="#" class='red'>Red</a>
		</li>
	</ul>
	<h3>Pattern-switcher</h3>
	<ul class='pattern'>
		<li>
			<a href="#" class='default'>Default</a>
		</li>
		<li>
			<a href="#" class='dark'>Dark wood</a>
		</li>
		<li><a href="#" class='light'>Light</a></li>
		<li><a href="#" class='wood'>Wood</a></li>
		<li><a href="#" class='retina-wood'>Retina-wood</a></li>
		<li><a href="#" class='linen'>Linen</a></li>
		<li><a href="#" class='paper'>Paper</a></li>
	</ul>
</div>
<div class="topbar clearfix">
	<div class="container-fluid">
		<a href="dashboard.html" class='company'>Neat Admin Template</a>
		<form action="#">
			<input type="text" value="Search here...">
		</form>
		<ul class='mini'>
			<li class='dropdown dropdown-noclose supportContainer'>
				<a href="#" class='dropdown-toggle' data-toggle="dropdown">
					<img src="img/icons/fugue/book-question.png" alt="">
					Support tickets
					<span class="label label-warning">5</span>
				</a>
				<ul class="dropdown-menu pull-right custom custom-dark">
					<li class='custom'>
						<div class="title">
							What is the question?
							<span>Jul 22, 2012 by <a href="#" class='pover' data-title="Hover me" data-content="User information comes here">Hover me</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show ticket"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete ticket"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
					<li class='custom'>
						<div class="title">
							How can i do this and that?
							<span>Jul 19, 2012 by <a href="#" class='pover' data-title="Username" data-content="User information comes here">Username</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show ticket"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete ticket"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
					<li class='custom'>
						<div class="title">
							I want more support tickets!
							<span>Jul 19, 2012 by <a href="#" class='pover' data-title="Lorem" data-content="User information comes here">Lorem</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show ticket"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete ticket"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
					<li class='custom custom-hidden'>
						<div class="title">
							This is a great feature, BUT...
							<span>Jul 18, 2012 by <a href="#" class='pover' data-title="Lorem" data-content="User information comes here">Ipsum</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show ticket"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete ticket"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
					<li class='custom custom-hidden'>
						<div class="title">
							I want more colors! How?
							<span>Jul 16, 2012 by <a href="#" class='pover' data-title="Lorem" data-content="User information comes here">Lorem</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show ticket"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete ticket"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
					<li class="custom">
						<div class="expand_custom">
							<a href="#">Show all support tickets</a>
						</div>
					</li>
				</ul>
			</li>
			<li class='dropdown pendingContainer'>
				<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
					<img src="img/icons/fugue/document-task.png" alt="">
					Pending orders
					<span class="label label-important">1</span>
				</a>
				<ul class="dropdown-menu pull-right custom custom-dark">
					<li class='custom'>
						<div class="title">
							Pending order #1 
							<span>Jul 22, 2012 by <a href="#" class='pover' data-title="Hover me" data-content="User information comes here">Hover me</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show order"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Delete order"><img src="img/icons/fugue/cross.png" alt=""></a>
							</div>
						</div>
					</li>
				</ul>
			</li>
			<li class='dropdown messageContainer'>
				<a href="#" class='dropdown-toggle' data-toggle='dropdown'>
					<img src="img/icons/fugue/balloons-white.png" alt="">
					Messages
					<span class="label label-info">3</span>
				</a>
				<ul class="dropdown-menu pull-right custom custom-dark">
					<li class='custom'>
						<div class="title">
							Hello, whats your name?
							<span>Jul 22, 2012 by <a href="#" class='pover' data-title="Hover me" data-content="User information comes here">Hover me</a></span>
						</div>
						<div class="action">
							<div class="btn-group">
								<a href="#" class='tip btn btn-mini' title="Show message"><img src="img/icons/fugue/magnifier.png" alt=""></a>
								<a href="#" class='tip btn btn-mini' title="Reply message"><img src="img/icons/fugue/mail-reply.png" alt=""></a>
							</div>
						</div>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">
					<img src="img/icons/fugue/gear.png" alt="">
					Settings
				</a>
			</li>
			<li>
				<a href="index.html">
					<img src="img/icons/fugue/control-power.png" alt="">
					Logout
				</a>
			</li>
		</ul>
	</div>
</div>
<div class="breadcrumbs">
	<div class="container-fluid">
		<ul class="bread pull-left">
			<li>
				<a href="dashboard.html"><i class="icon-home icon-white"></i></a>
			</li>
			<li>
				<a href="dashboard.html">
					Dashboard
				</a>
			</li>
		</ul>

	</div>
</div>
<div class="main">
	<div class="container-fluid">
	<div class="navi">
		<ul class='main-nav'>
			<li>
				<a href="dashboard.html" class='light'>
					<div class="ico"><i class="icon-home icon-white"></i></div>
					Dashboard
					<span class="label label-warning">10</span>
				</a>
			</li>
			<li>
				<a href="forms.html" class='light'>
					<div class="ico"><i class="icon-list icon-white"></i></div>
					Forms
					<span class="label label-info">1</span>
				</a>
			</li>
			<li>
				<a href="#" class='light toggle-collapsed'>
					<div class="ico"><i class="icon-th-large icon-white"></i></div>
					Tables
					<img src="img/toggle-subnav-down.png" alt="">
				</a>
				<ul class='collapsed-nav closed'>
					<li>
						<a href="datatables.html">
							Data Tables
						</a>
					</li>
					<li>
						<a href="plaintables.html">
							Plain Tables
						</a>
					</li>
					<li>
						<a href="mediatables.html">
							Media Tables
						</a>
					</li>
				</ul>
			</li>
			<li class='active open'>
				<a href="#" class='light toggle-collapsed'>
					<div class="ico"><i class="icon-tasks icon-white"></i></div>
					Interface Elements
					<img src="img/toggle-subnav-up-white.png" alt="">
				</a>
				<ul class='collapsed-nav'>
					<li>
						<a href="buttons.html">
							Buttons & Icons
						</a>
					</li>
					<li>
						<a href="sliders.html">
							Sliders & Progress-Bars
						</a>
					</li>
					<li class='active'>
						<a href="tooltips.html">
							Tooltips, Alerts & Notification
						</a>
					</li>
					<li>
						<a href="tabs.html">
							Tabs, Pills & Accordion
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="statistics.html" class='light'>
					<div class="ico"><i class="icon-signal icon-white"></i></div>
					Statistics
					<span class="label label-important">3</span>
				</a>
			</li>
			<li>
				<a href="#" class='light toggle-collapsed'>
					<div class="ico"><i class="icon-exclamation-sign icon-white"></i></div>
					Error Pages
					<img src="img/toggle-subnav-down.png" alt="">
				</a>
				<ul class='collapsed-nav closed'>
					<li>
						<a href="403.html">
							403
						</a>
					</li>
					<li>
						<a href="404.html">
							404
						</a>
					</li>
					<li>
						<a href="500.html">
							500
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#" class='light toggle-collapsed'>
					<div class="ico"><i class="icon-book icon-white"></i></div>
					Sample Pages
					<img src="img/toggle-subnav-down.png" alt="">
				</a>
				<ul class='collapsed-nav closed'>
					<li>
						<a href="gallery.html">
							Gallery
						</a>
					</li>
					<li>
						<a href="messages.html">
							Messages
						</a>
					</li>
					<li>
						<a href="userprofile.html">
							User Profile
						</a>
					</li>
					<li>
						<a href="index.html">
							Login
						</a>
					</li>
					<li>
						<a href="results.html">
							Search results
						</a>
					</li>
					<li>
						<a href="view.html">
							View form
						</a>
					</li>
					<li>
						<a href="invoice.html">
							Invoice
						</a>
					</li>
					<li>
						<a href="navigation_hover.html">
							Navigation expand on hover
						</a>
					</li>
					<li>
						<a href="calendar.html">Calendar</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#" class='light toggle-collapsed'>
					<div class="ico"><i class="icon-resize-full icon-white"></i></div>
					Layouts
					<img src="img/toggle-subnav-down.png" alt="">
				</a>
				<ul class='collapsed-nav closed'>
					<li>
						<a href="#" class='set-liquid'>
							Liquid
						</a>
					</li>
					<li>
						<a href="#" class='set-fixed'>
							Fixed
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="content">
			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>Simple tooltips</h3>
						</div>
						<div class="box-content">
							<div class="alert alert-info">
								<strong>Information!</strong> Just hover the links!
							</div>
							Lorem ipsum laboris voluptate <a href="#" class='tip' title="This is a simple tooltip">amet ut quis nulla</a> eu. Lorem ipsum fugiat amet dolor dolor dolore consectetur veniam pariatur dolore ex magna in laborum tempor. <a href="#" class='tip' title="This is a simple tooltip">Lorem ipsum velit</a> ut nulla nostrud labore tempor labore esse amet ex est quis aliquip. Lorem ipsum in nisi dolor dolor in cillum irure ut elit. Lorem ipsum sed dolore in id Ut laborum. Lorem ipsum aliqua magna ea in ea magna laboris eiusmod dolor quis <a href="#" class='tip' title="This is a simple tooltip">incididunt sed</a> sit ea do. Lorem ipsum nostrud deserunt est occaecat ea Duis elit nulla qui incididunt mollit. Lorem ipsum sed <a href="#" class='tip' title="This is a simple tooltip">labore dolor</a> ad consequat consectetur incididunt pariatur laborum magna commodo proident nisi aute incididunt. Lorem ipsum non fugiat mollit <a href="#" class='tip' title="This is a simple tooltip">aute pariatur</a> mollit nostrud mollit cillum officia amet laborum ad tempor. Lorem ipsum magna amet labore magna quis sit. <a href="#" class='tip' title="This is a simple tooltip">Lorem ipsum cillum</a> eiusmod ex nostrud Duis ullamco ea eu sunt. 
						</div>
					</div>
				</div>
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>Tooltip placements (custom button colors)</h3>
						</div>
						<div class="box-content">
							<a href="#" class='btn tip btn-darkgrey' title="This is right" data-placement="right">Right</a>
							<a href="#" class='btn tip btn-lightgreen' title="This is left" data-placement="left">left</a>
							<a href="#" class='btn tip btn-lightblue' title="This is bottom" data-placement="bottom">Bottom</a>
							<a href="#" class='btn tip btn-lightred' title="This is top" data-placement="top">Top</a>
							<div class="btn-toolbar">
								<p>You only have to use <code>data-placement="right/left/top/bottom"</code> to set the tooltip on a specific side!</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>Alerts</h3>
						</div>
						<div class="box-content">
							<div class="alert alert-block">
							  <a class="close" data-dismiss="alert" href="#">×</a>
							  <h4 class="alert-heading">Warning!</h4>
							  Best check yo self, you're not...
							</div>
							<div class="alert alert-block alert-success">
							  <a class="close" data-dismiss="alert" href="#">×</a>
							  <h4 class="alert-heading">Success!</h4>
							  Best check yo self, you're not...
							</div>
							<div class="alert alert-block alert-info">
							  <a class="close" data-dismiss="alert" href="#">×</a>
							  <h4 class="alert-heading">Info!</h4>
							  Best check yo self, you're not...
							</div>
							<div class="alert alert-block alert-danger">
							  <a class="close" data-dismiss="alert" href="#">×</a>
							  <h4 class="alert-heading">Danger!</h4>
							  Best check yo self, you're not...
							</div>
						</div>
					</div>
				</div>
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>jGrowl notification</h3>
						</div>
						<div class="box-content">
								<a href="#" class='opengrowl btn btn-primary' data-content="Some sample content">Give me a notification!</a>
							<div class="btn-toolbar">
								<a href="#" class='opengrowl hasheader btn btn-success' data-header="HEAD" data-content="Some sample content">Notification with header</a>
							</div>
							<div class="btn-toolbar">
								<a href="#" class='opengrowl hasheader btn btn-lightgreen' data-header="Another head" data-content="More content!">More</a>
							</div>
							<div class="btn-toolbar">
								<a href="#" class='opengrowl hasheader btn btn-darkgrey' data-header="HEAD" data-content="Lorem ipsum nostrud ullamco labore aliqua cupidatat do ut tempor. ">Lorem</a>
							</div>
							<p>
								No javascript needed. Header and content are set with <code>data</code> attributes.
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>Modals</h3>
						</div>
						<div class="box-content">
							<a class="btn btn-primary" data-toggle="modal" href="#myModal" >Launch Modal</a>
							<div class="modal hide" id="myModal">
							  <div class="modal-header">
							    <button type="button" class="close" data-dismiss="modal">×</button>
							    <h3>Modal header</h3>
							  </div>
							  <div class="modal-body">
							    <p>One fine body…</p>
							  </div>
							  <div class="modal-footer">
							    <a href="#" class="btn" data-dismiss="modal">Close</a>
							    <a href="#" class="btn btn-primary" data-dismiss="modal">Save changes</a>
							  </div>
							</div>
							<div class="btn-toolbar">
								Not a single line of javascript needed! Just add a modal-container and use <code>data-toggle="modal"</code>. 
							</div>
						</div>
					</div>
				</div>
				<div class="span6">
					<div class="box">
						<div class="box-head">
							<h3>Popovers</h3>
						</div>
						<div class="box-content">
							<p>You can see some sample popovers on the topbar. Hover the username!</p>
							<div class="btn-toolbar">
								<a href="#" class='pover btn btn-success' data-title="This is a title" data-content="Lorem ipsum commodo nisi reprehenderit nostrud sed Duis nostrud elit commodo occaecat pariatur fugiat consectetur Excepteur sed eiusmod. Lorem ipsum in ullamco incididunt ea consectetur fugiat tempor enim officia laborum. " data-trigger='hover'>Hover for popover</a>
								<a href="#" class='pover btn btn-danger' data-placement="top" data-title="This is a title" data-content="Lorem ipsum elit sed aliquip Duis veniam in non in non nulla incididunt do id in ut.  " data-trigger='hover'>Popover top</a>
								<a href="#" class='pover btn btn-inverse' data-trigger="manual" data-title="This is a title" data-content="Lorem ipsum veniam eu enim laborum Ut tempor qui et veniam eu. Lorem ipsum commodo ut in Ut Excepteur reprehenderit minim fugiat ea dolore labore exercitation. ">Click for popover toggle</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</div>
</div>	
<script src="js/jquery.js"></script>
<script src="js/less.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.min.js"></script>
<script src="js/bootstrap.timepicker.js"></script>
<script src="js/bootstrap.datepicker.js"></script>
<script src="js/chosen.jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/plupload/plupload.full.js"></script>
<script src="js/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.inputmask.min.js"></script>
<script src="js/jquery.tagsinput.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.jgrowl_minimized.js"></script>
<script src="js/jquery.dataTables.bootstrap.js"></script>
<script src="js/jquery.textareaCounter.plugin.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/ui.spinner.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/custom.js"></script><script src="js/demo.js"></script>
</body>
</html>